<template>
  <a-modal
    title="添加SKU"
    :visible="showAddSku"
    width="900px"
  >
    <template slot="footer">
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</a-button>
      <a-button v-if="current < 2" type="primary" @click="next">下一步</a-button>
      <a-button v-if="current === 2" type="primary" @click="submit">提交</a-button>
    </template>
    <a-steps v-model="current" type="navigation" :style="stepStyle" >
      <a-step v-for="item in steps" :status="item.status" :title="item.title" :disabled="true"/>
    </a-steps>
    <div class="steps-content">
      <sku-for-spu v-if="current ===0" ref="skuSpu"></sku-for-spu>
      <sku-for-attr v-if="current === 1" ref="skuForAttr" :sku="sku"></sku-for-attr>
      <sku-for-detail v-if="current === 2" ref="skuForDetail" :sku="sku"></sku-for-detail>
    </div>
  </a-modal>
</template>
<script>
import SkuForSpu from '@/views/wms/base/sku/modules/skuForSpu.vue'
import SkuForAttr from '@/views/wms/base/sku/modules/skuForAttr.vue'
import SkuForDetail from '@/views/wms/base/sku/modules/skuForDetail.vue'

export default {
  name: 'AddSku',
  components: { SkuForDetail, SkuForAttr, SkuForSpu },
  props: {
    showAddSku: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data () {
    return {
      current: 0,
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset'
      },
      steps: [
        {
          title: 'SPU信息',
          status: 'process'
        },
        {
          title: 'SPU属性',
          status: 'wait'
        },
        {
          title: 'SKU信息',
          status: 'wait'
        },
        {
          title: '完成',
          status: 'wait'
        }
      ],
      sku: {}
    }
  },
  watch: {},
  computed: {},
  methods: {
    next () {
      this.steps[this.current].status = 'finish'
      this.current++
      this.steps[this.current].status = 'process'
      if (this.current === 1) {
        this.sku = this.$refs.skuSpu.getSkuSpu()
      }
    },
    prev () {
      this.current--
    },
    submit () {
      this.next()
    },
    // 关闭
    close () {
      this.$store.dispatch('tagsView/delCachedView', this.$route)
    },
    // 再次新增
    addAgain () {
      this.rest()
    },
    // 重置数据
    rest () {
      this.current = 0
      this.steps = [
        {
          title: 'SPU信息',
          status: 'process'
        },
        {
          title: 'SPU属性',
          status: 'wait'
        },
        {
          title: 'SKU信息',
          status: 'wait'
        },
        {
          title: '完成',
          status: 'wait'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  }
}
</script>,
<style scoped>
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}
</style>
